<template>
  <div id="app">
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
      我的打卡
    </el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="createTime"
            label="日期"
            :formatter="formatDate"
            width="180">
          </el-table-column>
          <el-table-column
            prop="cardStatusName"
            label="状态">
          </el-table-column>
        </el-table>
      </template>
    </el-drawer>
    <div class="container">
      <div class="top-section">
        <div class="button-wrapper">
          <el-button
            class="punch-button"
            :class="{
              disabled: isLeftButtonDisabled,
              clicked: workPunchStatus === 'success',
              'no-animation': isLeftButtonDisabled,
            }"
            :style="leftButtonStyle"
            :disabled="isLeftButtonDisabled"
            @click="handleWorkPunch"
          >
            上班打卡<br />
            <span>{{ currentTime }}</span>
          </el-button>
        </div>
        <div class="button-wrapper">
          <el-button
            class="punch-button"
            :class="{
              disabled: isRightButtonDisabled,
              clicked: offPunchStatus === 'success',
              'no-animation': isRightButtonDisabled,
            }"
            :style="rightButtonStyle"
            :disabled="isRightButtonDisabled"
            @click="handleOffPunch"
          >
            下班打卡<br />
            <span>{{ currentTime }}</span>
          </el-button>
        </div>
      </div>
      <div class="bottom-section">
        <Map @updateDakatime="handleDakatime"></Map>
      </div>
    </div>
  </div>
</template>

<script>
import Map from '@/components/GaoDeMap/Map.vue'
import { getMyMap } from '@/api/Map/Map'

export default {
  components: { Map },
  data() {
    return {
      currentTime: this.getCurrentTime(),
      workPunchStatus: null, // 记录上班打卡状态
      offPunchStatus: null, // 记录下班打卡状态
      dakatime: "",
      drawer: false,
      id: 0,
      tableData: {},
      workPunchedOnce: false, // 新增标志变量
      offPunchedOnce: false, // 新增标志变量
    };
  },
  computed: {
    isLeftButtonDisabled() {
      const hour = new Date().getHours();
      return hour < 8 || hour >= 12 || this.workPunchStatus === "success"; // 8点之前和12点之后禁用，已打卡禁用
    },
    leftButtonStyle() {
      const hour = new Date().getHours();
      if (hour < 12) {
        return {
          backgroundColor: "#66ccff", // 0点到12点之间的颜色
          cursor: "pointer",
        };
      } else {
        return {
          backgroundColor: this.isLeftButtonDisabled ? "#FF7256" : "#66ccff", // 12点之后的颜色
          cursor: this.isLeftButtonDisabled ? "not-allowed" : "pointer",
        };
      }
    },
    isRightButtonDisabled() {
      const hour = new Date().getHours();
      return hour < 12 || this.offPunchStatus === "success"; // 12点之前禁用，已打卡禁用
    },
    rightButtonStyle() {
      return {
        backgroundColor: this.isRightButtonDisabled ? "#FF7256" : "#66ccff", // 淡蓝色
        cursor: this.isRightButtonDisabled ? "not-allowed" : "pointer",
      };
    },
  },
  methods: {
    getlist() {
      getMyMap().then(res => {
        this.tableData = res.data;
        for (let i = 0; i < res.data.length; i++) {
          switch (res.data[i].cardStatus) {
            case 1:
              this.tableData[i].cardStatusName = "迟到";
              break;
            case 2:
              this.tableData[i].cardStatusName = "缺勤";
              break;
            case 0:
              this.tableData[i].cardStatusName = "早退";
              break;
            case 3:
              this.tableData[i].cardStatusName = "打卡成功";
              break;
          }
        }

        // 重置标志变量
        this.workPunchedOnce = false;
        this.offPunchedOnce = false;
      });
    },
    formatDate(row, column, cellValue, index) {
      if (!cellValue) return "";
      const date = new Date(cellValue);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getCurrentTime() {
      return new Date().toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
      });
    },
    handleDakatime(dakatime) {
      this.dakatime = dakatime;
    },
    handleWorkPunch() {
      if (this.workPunchedOnce) {
        this.$message.warning("您已经进行了此操作");
        return;
      }

      if (this.dakatime === false) {
        this.$message.warning("你不在打卡范围内");
        return;
      }

      if (this.dakatime === true) {
        const hour = new Date().getHours();
        if (hour < 7) {
          this.$message.warning("当前无法打卡");
        } else if (hour < 8) {
          this.workPunchStatus = "success";
          this.$message.success("上班打卡成功");
        } else {
          this.workPunchStatus = "late";
          this.$message.error("上班打卡迟到");
          this.workPunchedOnce = true; // 设置标志变量
        }
      }
    },
    handleOffPunch() {
      if (this.offPunchedOnce) {
        this.$message.warning("您已经进行了此操作");
        return;
      }

      if (this.dakatime === false) {
        this.$message.warning("你不在打卡范围内");
        return;
      }

      if (this.dakatime === true) {
        const hour = new Date().getHours();
        if (hour < 12) {
          this.$message.warning("当前无法打卡");
        } else if (hour >= 12 && hour < 17) {
          this.$message.error("早退");
          this.offPunchedOnce = true; // 设置标志变量
        } else if (hour >= 17 && hour < 20) {
          this.offPunchStatus = "success";
          this.$message.success("下班打卡成功");
        }
      }
    },
  },
  mounted() {
    setInterval(() => {
      this.currentTime = this.getCurrentTime();
    }, 1000); // 每秒更新当前时间
    this.getlist();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}

.top-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50%;
}

.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.punch-button {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  color: white;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s, transform 0.3s;
  animation: pulse 1.5s infinite; /* 添加波动动画 */
}

.punch-button.no-animation {
  animation: none; /* 不播放动画 */
}

.punch-button:hover:not(.disabled) {
  transform: scale(1.05);
}

.bottom-section {
  height: 50%;
  background-color: #f0f0f0;
}

.map-area {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
</style>